<template>
	<div class="zco-img-message-container">
		<div v-if="loading" class="zco-img-message-loading"></div>
		<img v-show="!loading" :src="url" alt="" srcset="" class="imgURL-message" :id="id" />
	</div>
</template>

<script>
export default {
	props: {
		imgURL: {
			type: String
		}
	},
	data() {
		return {
			url: '',
			id: parseInt(Math.random() * 999),
			loading: true
		};
	},
	watch: {},
	mounted() {
		this.id = this.getOnlyId();
		if (this.imgURL.includes('https')) {
			this.url = this.imgURL;
		} else {
			this.url = this.imgURL.replace(/^http(s)?:\/\//, 'https://');
		}
		let img = new Image();
		const that = this;
		img.onload = function () {
			that.loading = false;
			console.log('zco-message-img', img.width, img.height, '+', new Date());
			that.$nextTick(() => {
				let image = document.getElementById(that.id);
				if (img.width > img.height) {
					image.style.width = 100 + '%';
				} else if (img.width < img.height) {
					image.style.height = 100 + '%';
				} else {
					image.style.width = 100 + '%';
					image.style.height = 100 + '%';
				}
			});
		};
		img.src = this.url;
	},
	computed: {},
	methods: {
		getOnlyId() {
			let abc = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'g', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
			let [max, min] = [Math.floor(Math.random() * (10 - 7 + 1) + 1), Math.floor(Math.random() * (17 - 10 + 1) + 17)];
			abc = abc
				.sort(() => 0.4 - Math.random())
				.slice(max, min)
				.slice(0, 8)
				.join('');
			var a = new Date().getTime() + abc;
			return a;
		}
	}
};
</script>

<style scoped>
.zco-img-message-container {
	width: 140px;
	height: 140px;
	background: #f2f3fa;
	border-radius: 2px;
	position: relative;
}
.imgURL-message {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
.zco-img-message-loading {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	width: 100px;
	height: 20px;
	-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
	background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
	animation: loading 2s infinite steps(6);
}
@keyframes loading {
	100% {
		background-size: 120%;
	}
}
</style>
